<template>
  <div class="cocenter">
    <!-- <div style="width: 100%;height: 10vh;" >
      <headers></headers>
    </div> -->
    <div class="new_inf_box">
      <nav-ber type="2" :title="title_"></nav-ber>
      <div class="info_box_true">
        <div class="info_tito">
            {{info.name}}
        </div>
        <div v-html="info.content"></div>
        <img v-if="info.pic" :src="info.pic" style="width: 100%; height: auto;" alt="" />
        <div class="info_time">
          {{info.add_time}}
        </div>
        <div v-if="info.reply">
          <div v-if="info.reply.username" class="info_tito" style="margin-bottom: 10px;">
               {{info.reply.username}} 回复
          </div>
          <div v-if="info.reply.content" v-html="info.reply.content"></div>
          <img v-if="info.reply.pic && info.reply" :src="info.pic" style="width: 200px; height: auto;" alt="" />
          <div class="info_time">
            {{info.reply.add_time}}
          </div>

        </div>

      </div>
    </div>

  </div>
</template>

<script>
import navBer from "@/components/nav_ber"
import headers from "@/components/header"
 import {
   agreement_detail,
   comment_detail
 } from '@/utils/wqzApi'

export default {
    components:{
      navBer,
      headers
    },
    data () {
        return {
          html:'',
          type:'',
          title_:'',
          id:null,
          info:{},
        }
    },
    mounted() {
      var type = this.$getUrlParams().type
       this.id = Number(this.$getUrlParams().id)
      if(type == 'question'){
        this.type = 2
        this.title_ = this.$t('public.issuesInfo')
        this.getInfo()
      }else if(type == 'new') {
        this.type = 1
        this.title_ = this.$t('public.AnnouncementInfo')
        this.getInfo()
      }
      if(type == 'ping') {
        this.title_ = this.$t('public.testimonials')
        this.pingInfo()
      }
    },
    methods:{
      pingInfo(){
        var data = {
          id:this.id
        }
        comment_detail(data).then(res=>{
          console.log(data , '返回信息')
          this.info = res.data
        })
      },
      getInfo(){
        var type
        if(this.type==1){
          type = 3
        }
        if(this.type==2){
          type = 2
        }
        var data = {
          type:type,
          id:this.id
        }
        agreement_detail(data).then(res=>{
          console.log(res,'999999999')
          this.info = res.data
        })

      }

    }
}
</script>


<style lang="scss" scoped>
  .back_time{
    font-size: 13px;
    color:rgb(214, 204, 204)
  }
  .info_box_true{
    padding:0 3vw;
    box-sizing: border-box;
  }
  .cocenter{
    width: 100%;
    min-height: 100vh;
    background-color: #f2f2f2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    .new_inf_box{
      width: 80%;
      min-height: 90vh;
      background-color: #fff;
      padding: 1%;
      box-sizing: border-box;
    }

  }
  .info_tito{
    font-size: 18px;
    font-weight: 800;
    color: #000;
    margin-top: 3vh;
    border-bottom: 1px solid #333;
    padding: 2vh 0;

  }
  .info_time{
    font-size: 15px;
    color: #ccc;
    border-bottom: 1px solid #333;
    padding: 2vh 0;
  }
</style>

